@charset "UTF-8";
@import "./common.scss";

.wrapper{ position: relative; width: 100%; height: 100%; background: #ff55a9;
    .items{ position: relative; height: 100%;
        li{ width: 100%; height: 100%;overflow: hidden; position: absolute;
            img{width: 100%; height: 100%;}
            .cate-mian{ height: 100%; position: absolute; left: 0; top: 0; z-index: 10; width: 100%;
                .cate-list{ width: 82%;  position: absolute; left: 9%; height: 60%; top: 2rem; min-height: 300px;
                    a{ width: 3rem; margin: 0 0.53rem; background: transparent; float: left; height: 1.05rem; text-indent: -1000px; overflow: hidden;}
                }
            }
            .zdppjs_tit{ width: 1.6rem; height: 2.8rem; position: absolute; top: -0.43rem; left:0; z-index: 100;}
            .zdppjs_main{ width: 7.55rem; height:3.7rem; position: absolute; left: 2.32rem; top: 1.15rem; z-index: 5;
                span{ position: absolute;}
                .spic_00{ width: 0.96rem; height: 25%; left: 0; top: 50%; }
                .spic_01{ width: 0.96rem; height: 25%; left: 0.98rem; top: 50%;}
                .spic_02{ width: 1.92rem; height: 25%; left: 0;; top: 73%; }
                .spic_03{ width: 1.92rem; height: 25%; left: 1.92rem;; top: 50%;}
                .spic_04{ width: 1.92rem; height: 25%; left: 1.92rem;; top: 73%; }
                .spic_05{ width: 0.96rem; height: 25%; left: 3.82rem; top: 25%; }
                .spic_06{ width: 0.96rem; height: 25%; left: 4.78rem; top: 25%; }
                .spic_07{ width: 1.92rem; height: 25%; left: 3.82rem;; top: 50%;}
                .spic_08{ width: 1.92rem; height: 25%; left: 3.82rem;; top: 73%;}
                .spic_09{ width: 1.92rem; height: 25%; right:0;; top: 25%;}
                .spic_10{ width: 100%; height: 25%; right:0;; top: 0; }
            }
            .bpic_main{ width: 8.62rem; height: 4.5rem; position: absolute; left:1.2rem; top:0.47rem; z-index: 8; display: none;
                img{ width: 100%; display: block;}
            }
        }
    }
}

.touchslide,.swiper-one{ width: 100%; height: 100%; position: relative;
    .touchslider-viewport{ overflow: hidden; width: 100%; height: 100%;
        img{ width: 100%;}
    }
    .touchslider-prev,
    .touchslider-next{ position: absolute; top: 2.4rem; width: 0.44rem; height: 0.52rem; text-indent: -1000px;overflow: hidden;}
    .touchslider-prev{ left: 0; background: url(../img/left_btn.png) no-repeat; background-size:100% auto;}
    .touchslider-next{ right: 0;background: url(../img/right_btn.png) no-repeat;  background-size:100% auto;}
}

.menu-btn{ width: 30px; height: 30px; position: fixed; right: 10px; top: 10px; z-index: 100; display: none;
  span{ height: 6px; overflow: hidden; background: #ed4495; display: block; margin-bottom: 2px;}
};
.cate-list{ width: 82%;  position: fixed; left: 9%; height: 60%; top: 2rem; min-height: 300px; display: none; z-index: 100;
    a{ width: 3rem; margin: 0 0.53rem; background: transparent; float: left; height: 0.9rem; text-indent: -1000px; overflow: hidden;}
} 
#page{width: 100%;height: 100%; position: absolute; left: 50%; top: 50%;overflow: hidden; transform: translate3d(-50%, -50%, 0px); -webkit-transform: translate3d(-50%, -50%, 0px);-moz-transform: translate3d(-50%, -50%, 0px);}
.swiper-container { width: 100%;height: 100%;left: 0; top: 0; position: absolute; background: url(../img/sc_a_d.png) no-repeat center center; background-size: 100% 100%; 
  .swiper-slide{width:100%;height:100%;}
  .swiper-button-prev,
  .swiper-button-next{ width: 0.44rem; height: 0.52rem; }
  .swiper-button-prev{ background: url(../img/left_btn.png) no-repeat; background-size:100% auto;}
  .swiper-button-next{ background: url(../img/right_btn.png) no-repeat;  background-size:100% auto;}
  .sc_a_img1{width:9.36rem;left:0.39rem;top:0.37rem;z-index:3;}
  .sc_a_img2{width:4rem;left:3rem;top:-0.5rem;z-index:3;}
  .sc_a_img3{ width:2.28rem; right: 0.46rem; top: 2.8rem; z-index:3;}
  .sc_b_img1{ width:3.15rem; left: 50%; margin-left: -1.58rem; top: -0.7rem; z-index:3;}
  .sc_b_img2{ width:7.3rem;  left: 50%; margin-left: -3.65rem; top: 1.8rem; z-index:3;
    li{ width: 44%; margin: 5px 3% 5px 0; float: left;
      img{ width: 100%;}
    }
  }
  .sc_c_img1,
  .sc_d_img1,
  .sc_e_img1,
  .sc_f_img1,
  .sc_g_img1{ width:100%;  left: 0; top: 0; z-index:1;}
  .sc_c_img2{ width:9.62rem;  left: 0.2rem; top: 2.5rem; z-index:2;}
  .sc_d_img2,
  .sc_e_img2,
  .sc_f_img2,
  .sc_h_img2{ width:1.62rem;  left: 0; top: -0.5rem; z-index:2;}
  .sc_e_img1{
    .zdppjs_main{ width: 7.55rem; height:3.7rem; position: absolute; left: 2.32rem; top: 0.72rem; z-index: 5;
          span{ position: absolute;}
          img{ width: 100%; height: 100%;}
          .spic_00{ width: 0.96rem; height: 18%; left: 0; top: 52%; }
          .spic_01{ width: 0.96rem; height: 18%; left: 1rem; top: 52%;}
          .spic_02{ width: 1.92rem; height: 18%; left: 0;; top: 73%; }
          .spic_03{ width: 1.92rem; height: 18%; left: 1.92rem;; top: 52%;}
          .spic_04{ width: 1.92rem; height: 18%; left: 1.92rem;; top: 73%; }
          .spic_05{ width: 0.96rem; height: 18%; left: 3.82rem; top: 30%; }
          .spic_06{ width: 0.96rem; height: 18%; left: 4.78rem; top: 30%; }
          .spic_07{ width: 1.92rem; height: 18%; left: 3.82rem;; top: 52%;}
          .spic_08{ width: 1.92rem; height: 18%; left: 3.82rem;; top: 73%;}
          .spic_09{ width: 1.70rem; height: 18%; right:0;; top: 30%;}
          .spic_10{ width: 100%; height: 18%; right:0;; top: 10%; }
      }
  }
  .sc_g_img2{ width:3.15rem; left: 50%; margin-left: -1.58rem; top: -0.7rem; z-index:3;}
  .sc_g_img3{ width:8.7rem;  left: 0.6rem; top: 2.2rem; z-index:4;}
  .sc_h_img2{ width:1.62rem;  left: 0; top: -0.5rem; z-index:2;}
  .sc_h_img1{ width:7.05rem;  left: 2.26rem; top: 0.4rem; z-index:2;}
}
// #swiper-container-two{display: none}
.ani{position:absolute;}

.isVertical{ width: 100%;
  #page {transform: translate3d(-50%, -50%, 0px) rotate(90deg); }
  .menu-btn{right: 10px; bottom: 10px;transform: translate3d(0, 0, 0px) rotate(90deg); top: auto;}
}
#swiper-container-one{ z-index: 1;}
#swiper-container-two{ z-index: 0;}
// #swiper-container-big{ display: none}
#swiper-container-big{ width: 8.62rem; height: 4rem; position: absolute; left:1.2rem; top:-500px; background: none;
  .sBtn{ width: 80px; height: 80px; position: absolute; right: 0; top: 0;}
  img{ position: absolute; height: 100%;}
}
.ani{position:absolute;}

